<template>
    <div>
        <!-- <refresh title="同步HDFS" :loading="isRefreshing" @refresh="onRefresh" /> -->
        <el-radio-group v-model="resourceLabel">
            <el-radio-button label="公共"></el-radio-button>
            <el-radio-button v-if="isTenant" label="私有"></el-radio-button>
            <el-radio-button v-if="isTenant" label="共享"></el-radio-button>
        </el-radio-group>
        <search placeholder="请输入资源名称" live-search :search-word.sync="searchWord" @search="onSearch"/>
        <!-- 目录面包屑 -->
        <breadcrumb
            :breadcrumb-list="breadcrumbList"
            @change="onBreadChange"
            :show-return="false"
            :show-user="false"
            separator="/"
        />
        <!-- 资源列表 -->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column
                label="目录"
            >
                <template slot-scope="scope">
                    <el-link 
                        type="primary"
                        :underline="false"
                        @click.native="onOpenResource(scope.row)"
                    >{{ scope.row.url }}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                :label="`分配的${subUserFlag}`"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row[subListFlag] && scope.row[subListFlag].length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row[subListFlag]" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row[subListFlag].length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="resourceType === 2"
                label="分享的租户"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.tenantList && scope.row.tenantList.length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row.tenantList" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row.tenantList.length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="当前租户包含权限" v-if="isTenant">
                <template slot-scope="scope">
                    <span 
                        v-for="(m, i) in (scope.row.powerList || '-').split('|')" 
                        :key="m"
                    >
                        {{ m }}
                        {{ formatDian((scope.row.powerList || '-').split('|').length, i) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column v-if="showQuotaAndFileCount" label="容量配额">
                <template slot-scope="scope">
                    {{ scope.row.capacity + getCapacityUnit(scope.row.unit)}}
                </template>
            </el-table-column>
            <el-table-column v-if="showQuotaAndFileCount" prop="fileNum" label="文件配额(个)"></el-table-column>
            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-tooltip v-if="canAssignAuth" content="权限配置" placement="top">
                        <el-button @click="handleAssignAuth(scope.row)" type="text" size="small">
                            <i class="el-icon-unlock icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="查看详情" placement="top">
                        <el-button @click="handleViewDetail(scope.row)" type="text" size="small">
                            <i class="el-icon-view icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination 
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @currentPageChange="handleCurrentPageChange"
            @pageSizeChange="handlePageSizeChange"
        />
        <!-- 权限配置弹窗 -->
        <authority-dialog
            v-if="dialogVisible"
            :visible.sync='dialogVisible'
            :current-row="currentRow"
            :service-path="currentRow.url || ''"
            @update="handleUpdateAuth"
        />
        <!-- 权限详情弹窗 -->
        <authority-detail 
            v-if="detailVisible"
            :visible.sync='detailVisible'
            :current-row="currentRow"
            :service-path="currentRow.url || ''"
        />
    </div>
</template>
<script>
import { ROOT_PUBLIC_PATH_INFO, ROOT_TENANT_SPACE_NAME, CAPACITY_UNIT_MAP } from '@/const'
import roleMixin from '@/mixins/role'
import serviceAuthMixin from './mixins/serviceAuthMixin.js'
import AuthorityDialog from '@/components/authority/Dialog.vue'
import AuthorityDetail from '@/components/authority/Detail.vue'
import Breadcrumb from '@/components/authority/Breadcrumb.vue'
import Search from '@/components/common/Search.vue'
import Pagination from '@/components/common/Pagination.vue'

export default {
    name: 'authorityHDFS',
    components: { AuthorityDialog, AuthorityDetail, Search, Breadcrumb, Pagination },
    mixins: [ roleMixin, serviceAuthMixin ],
    computed: {
        // 是否显示容量和文件数
        showQuotaAndFileCount() {
            return this.breadcrumbList.length < 2
        },
        // 当前列表资源目录
        currDir() {
            return this.breadcrumbList[this.breadcrumbList.length - 1]
        },
        // 是否显示用户
        // showUser() {
        //     return this.resourceType === 2
        // },
        // 是否可以分配权限
        canAssignAuth() {
            const length = this.breadcrumbList.filter(b => b.resourceId).length
            const type = this.resourceType
            if (type === 1) {
                return length < 2
            } else if (type === 2) {
                return length < 3
            }
            return true
        }
    },
    watch: {
        resourceType(newVal) {
            if (newVal === 1) {
                this.breadcrumbList = [ ROOT_PUBLIC_PATH_INFO ]
            } 
            // else if (newVal === 2) {
            //     // this.breadcrumbList = [ { name: this.loginerName } ]
            //     this.breadcrumbList = [ {name: ROOT_TENANT_SPACE_NAME} ]
            // } 
            else {
                this.breadcrumbList = [ {name: ROOT_TENANT_SPACE_NAME} ]
            }
            this.getResourceList({ currentPage: 1 })
        }
    },
    created() {
        this.breadcrumbList = [ ROOT_PUBLIC_PATH_INFO ]
    },
    methods: {
        // 点击打开子目录
        onOpenResource({ resourceId, url }) {
            const bread = {
                resourceId,
                name: url
            }
            this.breadcrumbList.push(bread)
            this.getResourceList({ resourceId, currentPage: 1 })
        },
        getCapacityUnit(unit) {
            return CAPACITY_UNIT_MAP[unit] || ''
        },
    }
}
</script>
<style lang="scss" scoped>
    @import '~@/styles/variables.scss';
    .tenant-name {
        color: $dark;
    }
</style>
